<template>
  <div>
    <div class="app-header" :class="langClass">
      <div class="app-header-box">
        <img src="/static/images/logo.png" class="app-logo" />
        <ul class="app-header-menu">
          <router-link
            tag="li"
            :to="link.path"
            active-class="active"
            :exact="link.path === '/'"
            :class="$route.meta && $route.meta.isHome && link.path =='/' ? 'active' : ''"
            v-for="(link, index) in links"
            :key="index"
            >{{ $t(link.name) }}</router-link
          >
        </ul>
        <div class="app-header-right">
          <div class="inputs hidden-xs-only inpuliu">
            <div class="el-input" style="line-height: 30px">
              <input
                type="text"
                autocomplete="off"
                placeholder="请搜索"
                class="el-input__inner"
              />
            </div>
            <img
              src=""
              alt=""
              style="cursor: pointer"
            />
          </div>
          <div class="havess hidden-xs-only">
            <div class="haves" :style="lang == 'zh' ? 'background: rgb(202, 41, 41)' : 'background: rgb(41, 108, 202)'">
              {{ lang == 'zh' ? 'CN' :  'EN'}}
            </div>
            <div class="thisHaves">
              <div class="haves" @click="changeLang" :style="lang !== 'zh' ? 'background: rgb(202, 41, 41)' : 'background: rgb(41, 108, 202)'">{{ lang == 'zh' ? 'EN' :  'CN'}}</div>
            </div>
          </div>
          <template v-if="!userInfo">
              <button @click="loginVisible = true">登陆</button>
              <button @click="centerDialogVisible = true">注册</button>
          </template>
          <div class="header-info" v-else>
            <div class="user">
              <a href="#"><img src="/static/images/top-person.png"></a><i class="caret"></i>
            </div>
            <ul class="list-dropdown">
              <li><router-link to="/personal/info/own">个人中心</router-link></li>
              <li><router-link to="/personal/info/message">消息提醒</router-link></li>
              <li><a href="javacript:void(0)" @click="logout">退出</a></li>
            </ul>
          </div>

        </div>
      </div>
    </div>
    <Dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="525px"
      custom-class="reg-dialog"
      center
    >
      <span slot="title"
        >账号注册
        <divider></divider>
      </span>
      <el-form
        ref="regForm"
        :rules="rules"
        :model="regForm"
        label-width="120px"
      >
        <el-row>
          <el-col :span="22">
            <el-form-item label="手机号码" prop="mobile">
              <el-input
                v-model="regForm.mobile"
                placeholder="电子邮箱或手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="滑动验证">
              <vue-simple-verify
                ref="verify"
                @success="() => {}"
                :width="310"
                movedColor="#286ad8"
              />
            </el-form-item>
            <el-form-item label="短信验证码" :inline="true">
              <el-col :span="14">
                <el-input v-model="form.name" placeholder=""></el-input>
              </el-col>
              <el-col :span="9" :offset="1"
                ><el-button>发送验证码</el-button></el-col
              >
            </el-form-item>
            <el-form-item
              label="密码"
              style="margin-bottom: 10px"
              prop="password"
            >
              <el-input
                v-model="regForm.password"
                type="password"
                placeholder="6-20位密码，字母区分大小写"
              ></el-input>
            </el-form-item>
            <el-form-item label="" style="margin-bottom: 10px">
              <el-checkbox v-model="regForm.isRead"></el-checkbox>
              <span style="vertical-align: middle">已阅读并同意</span
              ><Link>《注册协议》</Link>
            </el-form-item>
            <el-col style="text-align: center">
              <el-button class="reg-button" @click="goReg">立即注册</el-button>
              <div style="margin-top: 20px">
                <span>已有账号？</span
                ><span style="color: #286ad8">马上登陆</span>
              </div>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
    </Dialog>
    <Dialog
      title="提示"
      :visible.sync="loginVisible"
      width="525px"
      custom-class="login-dialog"
      center
    >
      <span slot="title"> 欢迎登陆 </span>
      <div class="login-tab">
        <div
          :class="activeName == 'phone' ? 'active' : ''"
          @click="activeName = 'phone'"
        >
          账号登陆
        </div>
        <div
          :class="activeName == 'wechat' ? 'active' : ''"
          @click="activeName = 'wechat'"
        >
          微信扫一扫
        </div>
      </div>
      <div class="phone-info" v-if="activeName == 'phone'">
        <el-form
          ref="form"
          :model="form"
          :rules="loginRule"
          label-width="120px"
        >
          <el-row>
            <el-col :span="22">
              <el-form-item label="账号" prop="account">
                <el-input
                  v-model="form.account"
                  placeholder="电子邮箱或手机号码"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="密码"
                prop="password"
                style="margin-bottom: 10px"
              >
                <el-input
                  v-model="form.password"
                  type="password"
                  placeholder="6-20位密码，字母区分大小写"
                ></el-input>
              </el-form-item>
              <el-form-item label="" style="margin-bottom: 10px">
                <el-col :span="12"><el-checkbox></el-checkbox> 记住账号</el-col>
                <el-col :span="12" style="text-align: right">忘记密码？</el-col>
              </el-form-item>
              <el-col style="text-align: center">
                <el-button class="reg-button" @click="goLogin"
                  >立即登陆</el-button
                >
                <div style="margin-top: 20px">
                  <span>还没有账号？</span
                  ><span style="color: #286ad8">马上注册</span>
                </div>
              </el-col>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="wechat-info" v-else>
        <div class="wechat-login-qrcode"></div>
        请使用微信呢扫描二维码登陆
      </div>
    </Dialog>
  </div>
</template>

<script>
import { Dialog, Divider, Link } from "element-ui";
import VueSimpleVerify from "vue-simple-verify";
import { reg, login } from "@/api";
import { mapGetters } from "vuex"
import "vue-simple-verify/dist/vue-simple-verify.css";
export default {
  components: {
    Dialog,
    Divider,
    Link,
    VueSimpleVerify,
  },
  data() {
    return {
      centerDialogVisible: false,
      loginVisible: false,
      activeName: "phone",
      form: {
        account: "",
        password: "",
      },
      rules: {
        mobile: [
          {
            required: true,
            message: "请输入手机号或电子邮箱",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      loginRule: {
        account: [
          {
            required: true,
            message: "请输入手机号或电子邮箱",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      regForm: {
        isRead: false,
        mobile: "",
        password: "",
      },
      links: [
        { path: "/", name: 'menus.home' },
        { path: "/match_center", name: "menus.match_center" },
        { path: "/centre", name: "menus.centre" },
        { path: "/enter_match", name: "menus.enter_match" },
        { path: "/live", name: "menus.live" },
        { path: "/news", name: "menus.news" },
        { path: "/about_match", name: "menus.about_match" },
        { path: "/forum", name: "menus.forum" },
        { path: "/cooper", name: "menus.cooper" },
        { path: "/exp", name: "menus.exp" },
      ],
    };
  },
  methods: {
    goReg() {
      this.$refs.regForm.validate((valid) => {
        if (valid) {
          if (!this.regForm.isRead) {
            this.$message("没有阅读注册协议");
          } else {
            reg(this.regForm)
              .then((res) => {
                console.log(res);
                if (res.data.code === 1) {
                  this.$message({ message: res.data.msg, type: "success" });
                  this.centerDialogVisible = false;
                } else {
                  this.$message(res.data.msg);
                }
              })
              .catch((res) => {
                console.log(res);
                this.$messge("请稍后再试");
              });
          }
        }
      });
    },
    goLogin() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          login(this.form)
            .then((res) => {
              console.log(res);
              if (res.data.code === 1) {
                this.$message({ message: res.data.msg, type: "success" });
                this.$store.commit('setUserInfo', res.data.data.userinfo)
                this.loginVisible = false;
              } else {
                this.$message(res.data.msg);
              }
            })
            .catch((res) => {
              console.log(res);
              this.$message("请稍后再试");
            });
        }
      });
    },
    changeLang () {
      const lang =  this.lang == 'zh' ? 'en' : 'zh'
      this.$store.commit('setLang', lang)
      this.$i18n.locale = lang
    },
    logout () {
      this.$store.commit('logout')
      this.$router.push({
        url: '/'
      })
    }
  },
  computed: {
    ...mapGetters({userInfo: 'getUserInfo', lang: 'getLang'}),
    langClass () {
      return this.lang !== 'zh' ? 'lang-en' : '' 
    }
  }
};
</script>
<style>
.reg-dialog .el-dialog__headerbtn .el-dialog__close {
  color: #cdcfd3;
}
.reg-dialog .el-dialog__headerbtn,
.login-dialog .el-dialog__headerbtn {
  right: -45px;
  top: -40px;
  font-size: 40px;
}
.reg-dialog .el-dialog__header {
  padding: 0;
  line-height: 46px;
  height: 46px;
  color: #1a268d;
  font-size: 20px;
}
.reg-dialog .el-divider--horizontal {
  margin: 0;
}
.reg-button.el-button {
  background-color: #286ad8;
  color: #fff;
  width: 192px;
}
.login-dialog.el-dialog {
  background-color: transparent;
}
.login-dialog .el-dialog__body {
  background: #fff;
  padding: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.login-dialog .el-dialog__header {
  padding: 0;
  background: url(/static/images/dialog-hdbg.png) no-repeat;
  background-size: cover;
  background-color: transparent;
  height: 96px;
  line-height: 96px;
  color: #fff;
  font-size: 30px;
}
.login-tab {
  height: 70px;
  line-height: 70px;
  border-bottom: 2px solid #dddde1;
  display: flex;
  padding: 0 20px;
  text-align: center;
}
.login-tab div {
  flex: 1;
  position: relative;
  cursor: pointer;
}
.login-tab .active::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 4px;
  display: inline-block;
  background: url("/static/images/login_tab_active.png") no-repeat;
  bottom: -2px;
  left: 50%;
  margin-left: -25px;
}
.login-dialog .phone-info {
  padding: 44px 0;
}
.login-dialog .wechat-info {
  color: #a7a7a7;
  text-align: center;
  padding: 44px 0;
}
.wechat-login-qrcode::after {
  content: "";
  display: inline-block;
  width: 180px;
  height: 180px;
  margin: 12.5px;
  background-color: #e4e4e4;
}
.wechat-login-qrcode {
  width: 205px;
  height: 205px;
  margin: 0 auto 17px;
  border: 1px solid #e4e4e4;
}
.header-info {
    display: inline-block;
    width: 50px;
    height: 80px;
    text-align: center;
    /* background: linear-gradient(180deg, #10156f , #0f1369 ); */
    margin-left: 20px;
    position: relative;
    top: -4px;
}

.header-info .user img {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    vertical-align: middle;
    display: inline-block;
}
.header-info .user .caret {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    cursor: pointer;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #A1A4DE;
}

.header-info .list-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding-top: 80px;
    background: linear-gradient(0deg,rgba(18,25,156,1),rgba(15,18,85,1));
    box-shadow: 0px 2px 4px 0px rgba(4,0,0,0.12);
    text-align: center;
    display: none;
}
.header-info .list-dropdown {
    top: 80px;
    padding: 0 10px;
    width: 90px;
    left: 50%;
    margin-left: -45px;
    background: #000;
    /* background: linear-gradient(180deg, #0f1369 , #0e1163 ); */
}
.header-info .list-dropdown {
    background: #fff;
    top: 45px;
    box-shadow: 0 2px 4px 0 rgb(4 0 0 / 12%);
}

.header-info .list-dropdown li a {
    display: inline-block;
    border-bottom: 1px solid rgb(151, 151, 151);
    padding-bottom: 8px;
    padding-top: 5px;
}
.header-info .list-dropdown li a {
    font-size: 12px;
    margin: 0;
    line-height: 33px;
    color: #959595;
    text-decoration: none;
}
.header-info:hover .list-dropdown {
    display: block;
}
</style>